<script setup lang="ts">
import { NForm, FormRules } from "naive-ui";
import { request } from "../apis";
import { notEmpty } from "../utils";
import { useUserStore } from "../store";
import { User } from "../types";

// 导入路由对象
const router = useRouter();
// 导入全局状态管理对象
const userStore = useUserStore();

// 使用 NForm 组件对模板引用进行类型标注
const formRef = ref<InstanceType<typeof NForm>>();
// 表单数据
const formValues: {
  username: string;
  password: string;
} = reactive({
  username: "123",
  password: "123123",
});
const errors = reactive({
  username: "",
  password: "",
});
//
const rules: FormRules = {
  username: [
    { required: true, trigger: "blur" },
    {
      min: 3,
      max: 16,
      // message: "长度在 3 到 16 个字符",
      trigger: "blur",
    },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    {
      min: 6,
      max: 20,
      message: "长度在 6 到 20 个字符",
      trigger: "blur",
    },
  ],
};
// 用户登录
const login = async () => {
  // 清空 errors
  Object.keys(errors).forEach(
    (key) => (errors[key as keyof typeof errors] = "")
  );
  // 表单验证
  await formRef.value?.validate();
  // 发起请求
  const { data } = await request<User>("/login", {
    method: "post",
    data: formValues,
  });
  if (data.success) {
    // 使用全局状态管理用户信息
    userStore.login(data.object as User);
    // 跳转至首页
    router.push({ name: "home" });
  } else {
    // 如果注册失败
    if (notEmpty(data.errors)) {
      Object.keys(errors).forEach((key) => {
        errors[key as keyof typeof errors] = data.errors![key].join(", ") ?? "";
      });
    }
  }
};
</script>
<template>
  <div
    class="w-full h-full relative from-teal-500 to-cyan-300 bg-gradient-to-br flex justify-center items-center"
  >
    <div
      class="w-1/2 bg-white z-10 flex justify-center p-4 rounded-md shadow-md"
    >
      <NForm
        ref="formRef"
        :model="formValues"
        :rules="rules"
        label-placement="left"
        label-width="6rem"
        :style="{
          maxWidth: '24rem',
        }"
        autocomplete="off"
      >
        <h1 class="my-2"  style="text-align: center;">帐户登录</h1>
        <NFormItem path="username" :feedback="errors.username">
          <NInput
            v-model:value="formValues.username"
            placeholder="Your Name"
            autocomplete="off"
          />
        </NFormItem>
        <NFormItem path="password" :feedback="errors.password">
          <NInput
            type="password"
            v-model:value="formValues.password"
            placeholder="password"
          />
        </NFormItem>
        <div>
          <NButton
            class="w-full"
            size="large"
            type="primary"
            @click.prevent="login"
          >
           登录
          </NButton>
        </div>
        <p class="my-8">
         还没有帐户？
          <a
            class="cursor-pointer text-teal-500 hover:text-teal-300 underline"
            @click="router.push({ name: 'register' })"
          >
            在此注册
          </a>
        </p>
      </NForm>
    </div>
    <svg
      class="fill-cyan-300 absolute bottom-0 col-start-1 row-start-1 h-auto w-full"
      width="1600"
      height="595"
      viewBox="0 0 1600 595"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M0 338L53.3 349.2C106.7 360.3 213.3 382.7 320 393.8C426.7 405 533.3 405 640 359.3C746.7 313.7 853.3 222.3 960 189.2C1066.7 156 1173.3 181 1280 159.2C1386.7 137.3 1493.3 68.7 1546.7 34.3L1600 0V595H1546.7C1493.3 595 1386.7 595 1280 595C1173.3 595 1066.7 595 960 595C853.3 595 746.7 595 640 595C533.3 595 426.7 595 320 595C213.3 595 106.7 595 53.3 595H0V338Z"
      ></path>
    </svg>
  </div>
</template>
<style scoped>
.w-custom {
  width: 80%;
}
</style>
